import React,{Component} from 'react';
import { Tabs,Select,Table,Button,Pagination ,Modal,Input,Upload,message,Icon,Drawer,Radio} from 'antd';
import {getReviewInfo,submitAudit,getResultFileInfor,deleteResultFile,getPdf,exportTable} from '../../store/action/auditrecruit';
import { getRecruitList} from '../../store/action/recruitList.js';
import {getFileInfor,getFile} from '../../store/action/userHome'
import {connect} from 'react-redux';
import configs from '../../store/action/common/configs';
import reqwest from 'reqwest';
import {getTokenHeader} from '../../utils/utils'
import './Auditrecruit.css';
import Qs from 'qs';
const baseUrl=configs.baseUrl;
const modoUrl='http://121.36.41.15/enroll_static/';
const { TabPane } = Tabs;
const { Option } = Select;
const { TextArea } = Input;
@connect((state)=>({
    
    list:state.auditrecruit.list,
    infoTotal:state.auditrecruit.infoTotal,
    recruitList: state.recruitList.list,
    resultFile:state.auditrecruit.resultList,
    pdfFile:state.auditrecruit.pdfFile,
    fuFile:state.userHome.fileList
}))
class Auditrecruit extends Component{
    constructor(props)
    {
        super(props);
        this.state={
            enrollId:0,
            stage:1,
            status:-1,
            willingClass:'',
            page:0,
            enrollId:0,
            list:[],
            current: 1,
            total:0,
            classes:[],
            visible: false,
            userId:0,
            examineSuggestion:'',
            fileList:[],
            userStatus:0,
            file:[],
            visible1: false,
            visible2: false,
            url:'',
            urlArr:[]
        }
    }

    componentDidMount(){
        let _id=this.props.match.params.id;
        this.setState({
            enrollId:_id
        })
        this.props.dispatch(getReviewInfo({
            enrollId:_id,
            stage:this.state.stage,
            status:this.state.status,
            page:1
        })).then(()=>{
            this.setState({
                list:this.props.list,
                total:this.props.infoTotal||0
            })
        });
        this.props.dispatch(getRecruitList({ id:_id})).then(() => {
            this.setState({
                classes:this.props.recruitList.pagingList[0].classes
            })
        });
    }

    getPdf=(id)=>{
        this.props.dispatch(getPdf({
            resumeId:id
        })).then(()=>{
            this.setState({
                url:this.props.pdfFile
            })
            this.showDrawer1();
        })
    }

    getFileInfor=(id)=>{
        this.props.dispatch(getFileInfor({
            resumeId:id
        })).then(()=>{
            this.setState({
                urlArr:this.props.fuFile
            })
            this.showDrawer2();
        })
    }

    downFile=(id)=>{
        this.props.dispatch(getFile({id:id})).then(()=>{

        });
    }
    showDrawer1 = () => {
        this.setState({
          visible1: true,
        });
      };
    
      onClose1 = () => {
        this.setState({
          visible1: false,
        });
      };
      showDrawer2 = () => {
        this.setState({
          visible2: true,
        });
      };
    
      onClose2 = () => {
        this.setState({
          visible2: false,
        });
      };
    handleUpload = () => {
        const { fileList } = this.state;
        let _id=this.props.match.params.id;
        const formData = new FormData();
        this.setState({
            uploading: true,
          });
        fileList.forEach(file => {
          formData.append('file', file);
          formData.append('enrollId',this.props.match.params.id);
          formData.append('stage',this.state.stage);
          const isLt2M = file.size /1024/1000 < 3;
            if (!isLt2M) {
                message.error('请上传小于3MB的文件!');
            }
            else{
                let headers=getTokenHeader({});
                reqwest({
                    url: `${baseUrl}file/uploadScore.do`,
                    method: 'post',
                    processData: false,
                    data: formData,
                    headers:headers,
                    success: (data) => {
                        if(data.msg==='file format error')
                        {
                            message.error("文件格式不正确，请参考模板文件")
                        }else{
                            message.success('上传成功');
                            this.props.dispatch(getResultFileInfor({
                                enrollId:parseInt(this.props.match.params.id),
                                stage:this.state.stage
                            })).then(()=>{
                                this.setState({
                                    file:this.props.resultFile||[]
                                })
                            });
                        }
                       
                    },
                    error: () => {
                      this.setState({
                        uploading: false,
                      });
                      message.error('upload failed.');
                    },
                  });
            }
          
        });
    
        this.setState({
            fileList: [],
            uploading: false,
          });
    
        // You can use any AJAX library you like
       
      };
    
      deleteFile=(id)=>{
          this.props.dispatch(deleteResultFile({
              id:id
          })).then(()=>{
            this.props.dispatch(getResultFileInfor({
                enrollId:parseInt(this.props.match.params.id),
                stage:this.state.stage
            })).then(()=>{
                this.setState({
                    file:this.props.resultFile||[]
                })
            });
          });
      }
    showModal = (id) => {
        this.setState({
          visible: true,
          userId:id
        });
      };
    
      handleOk = e => {
        this.setState({
          visible: false,
        });
        this.handleAudit();
      };
    
      handleCancel = e => {
        this.setState({
          visible: false,
        });
      };


    handleStatusChange=(value)=> {
        this.setState({
            status:value
        })
        
    }

    handleStatusChange1=(value)=> {
        this.setState({
            statusExport:value
        })
        
    }

    handleUserStatusChange=(e)=>{
        this.setState({
            userStatus:e.target.value
        })
    }
      handleClassChange=(value)=> {
        this.setState({
            willingClass:value
        })
        
    }

    handleClassChange1=(value)=> {
        this.setState({
            willingClassEx:value
        })
        
    }


    callback=(key)=> {
        this.setState({
            stage:key,
            status:-1,
            current:1,
            file:[],
            
        })
        this.props.dispatch(getReviewInfo({
            enrollId:this.props.match.params.id,
            stage:key,
            status:-1,
            page:1
        })).then(()=>{
            this.setState({
                list:this.props.list,
                total:this.props.infoTotal,
                status:'-1',
            })
        });
        if(key!=1)
        {
            this.props.dispatch(getResultFileInfor({
                enrollId:parseInt(this.props.match.params.id),
                stage:key
            })).then(()=>{
                this.setState({
                    file:this.props.resultFile||[]
                })
            });
        }
        
      }
    onChange = page => {
        this.setState({
          current: page,
        });
        this.props.dispatch(getReviewInfo({
            enrollId:this.props.match.params.id,
            stage:this.state.stage,
            status:this.state.status,
            willingClass:this.state.willingClass,
            page:page
        })).then(()=>{
            this.setState({
                list:this.props.list,
                total:this.props.infoTotal,
            })
        });
      };

      handleAudit=()=>{
          
        this.props.dispatch(submitAudit({
            enrollId:parseInt(this.props.match.params.id),
            userId:this.state.userId,
            stage:this.state.stage,
            status:parseInt(this.state.userStatus),
            examineSuggestion:this.state.examineSuggestion
        })).then(()=>{

            setTimeout(()=>{
                this.props.dispatch(getReviewInfo({
                    enrollId:parseInt(this.props.match.params.id),
                    stage:this.state.stage,
                    status:this.state.status,
                    page:1
                })).then(()=>{
                    this.setState({
                        list:this.props.list,
                        total:this.props.infoTotal||0
                    })
                });
            },2000);
           
        })
      }
      handleFind=()=>{
        this.props.dispatch(getReviewInfo({
            enrollId:this.props.match.params.id,
            stage:this.state.stage,
            status:this.state.status,
            willingClass:this.state.willingClass,
            page:1
        })).then(()=>{
            if(this.props.list.length===0)
            {
                message.info('暂无数据');
            }
                this.setState({
                    list:this.props.list,
                    total:this.props.infoTotal,
                    current:1
                })
            
        });
      }


     

      onInputChange = e => {
        this.setState({
            examineSuggestion:e.target.value
        })
      };
      
    render(){
        const {fileList,uploading} =this.state;
        const columns = [
            {
                title: 'id',
                dataIndex: 'userId',
                key: 'userId',
                width: '4%',
                align: 'center'
            },
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
                width: '6%',
                align: 'center'
            },
            {
                title: '学号',
                dataIndex: 'stuNum',
                key: 'stuNum',
                width: '9%',
                align: 'center'
            },
            {
                title: '班级',
                dataIndex: 'majorClass',
                key: 'majorClass',
                width: '7%',
                align: 'center'
            },
            {
                title: '志愿班级',
                dataIndex: 'willingClass',
                key: 'willingClass',
                width: '7%',
                align: 'center'
            },
            {
                title: '状态',
                key: 'status',
                dataIndex: 'status',
                align: 'center',
                width: '4%',
                render:(text,record)=>{
                    return <div>
                        {
                            record.status==-1?'等待审核':record.status==1?'通过':'拒绝'
                        }
                    </div>
                }
            },
            {
                title: '审核',
                key: 'review',
                dataIndex: 'review',
                align: 'center',
                width: '4%',
                render:(text,record)=>{
                    return <div><Button type="primary" onClick={()=>this.showModal(record.userId)}>审核</Button></div>
                }
            },
            {
                title: '查看详细信息',
                align: 'center',
                width: '4%',
                render:(text,record)=>{
                    return <div><Button onClick={()=>this.getPdf(record.id)} >查看</Button></div>
                }
            },
            {
                title: '查看附件',
                align: 'center',
                width: '4%',
                render:(text,record)=>{
                    return <div><Button onClick={()=>this.getFileInfor(record.id)} >查看</Button></div>
                }
            },
        ];
        const columnsJiKao = [
            {
                title: 'id',
                dataIndex: 'userId',
                key: 'userId',
                width: '4%',
                align: 'center'
            },
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
                width: '6%',
                align: 'center'
            },
            {
                title: '学号',
                dataIndex: 'stuNum',
                key: 'stuNum',
                width: '9%',
                align: 'center'
            },
            {
                title: '班级',
                dataIndex: 'majorClass',
                key: 'majorClass',
                width: '7%',
                align: 'center'
            },
            {
                title: '志愿班级',
                dataIndex: 'willingClass',
                key: 'willingClass',
                width: '7%',
                align: 'center'
            },
            {
                title: '状态',
                key: 'status',
                dataIndex: 'status',
                align: 'center',
                width: '4%',
                render:(text,record)=>{
                    return <div>
                        {
                            record.status==-1?'等待审核':record.status==1?'通过':'拒绝'
                        }
                    </div>
                }
            },
            {
                title: '机考成绩',
                key:'score',
                align: 'center',
                width: '4%',
                render:(text,record)=>{
                return <div>{
                    record.score===null?"暂无成绩":record.score
                    }</div>
                }
            },
            {
                title: '审核',
                key: 'review',
                dataIndex: 'review',
                align: 'center',
                width: '4%',
                render:(text,record)=>{
                    return <div><Button type="primary" onClick={()=>this.showModal(record.userId)}>审核</Button></div>
                }
            }
        ];
        const props = {
            onRemove: file => {
              this.setState(state => {
                const index = state.fileList.indexOf(file);
                const newFileList = state.fileList.slice();
                newFileList.splice(index, 1);
                return {
                  fileList: newFileList,
                };
              });
            },
            beforeUpload: file => {
              this.setState(state => ({
                fileList: [...state.fileList, file],
              }));
              return false;
            },
            fileList,
          };
    
        return(
            <div>
                <Tabs type="card" style={{width:'98%',height:'100%',margin:'1% 0% 1% 2%'}} onChange={this.callback}>
                    <TabPane tab="信息审核" key="1" >
                        <Select
                            onChange={this.handleStatusChange}
                            style={{ width: 150 }}
                            placeholder="请选择状态"
                            defaultValue="-1"
                        >
                            <Option value="-1">等待审核</Option>
                        <Option value="1">通过</Option>
                        <Option value="0" >拒绝</Option>
                        </Select>
                        <Select
                            onChange={this.handleClassChange}
                            style={{ width: 150 }}
                            placeholder="请选择班级"
                        >
                            {
                                this.state.classes.map((item,index)=>{
                                return <Option key={index} value={item}>{item}</Option>
                                })
                            }
                        </Select>
                        <Button onClick={this.handleFind}>查询</Button>
                        <span><a href="#">==========</a></span>
                        {/* dee */}
                        <Button onClick={this.exportTable}><a href={`${baseUrl}exportResume.do?${Qs.stringify({
                            enrollId:this.props.match.params.id,
                            stage:this.state.stage,
                            status:this.state.statusExport||null,
                            willingClass:this.state.willingClassEx||null,
                        })}`}>导出表格</a></Button>
                        <Select
                            onChange={this.handleStatusChange1}
                            style={{ width: 150 }}
                            placeholder="可选择状态"
                        >
                            <Option value="-1">等待审核</Option>
                        <Option value="1">通过</Option>
                        <Option value="0" >拒绝</Option>
                        </Select>
                        <Select
                            onChange={this.handleClassChange1}
                            style={{ width: 150 }}
                            placeholder="可选择班级"
                        >
                            {
                                this.state.classes.map((item,index)=>{
                                return <Option key={index} value={item}>{item}</Option>
                                })
                            }
                        </Select>
                        
                        <div className="lineBig">当前状态：
                        {
                            this.state.status==-1?'等待审核':this.state.status==1?'通过':'拒绝'
                        }
                        </div>
                        <Table columns={columns} dataSource={this.state.list} style={{marginTop:'2%',width:'92%'} } 
                        pagination={false}/>
                        <br />
                        <br />
                        <br />
                        <div style={{overflow:"hidden"}}>
                            <span>总计：{this.state.total} 条数据</span>
                        <Pagination current={this.state.current} pageSize={20}  total={this.state.total} onChange={this.onChange} style={{float:'right',marginRight:"10%"}}/>
                        </div>
                    </TabPane>
                    <TabPane tab="机试" key="2">
                    <Select
                            onChange={this.handleStatusChange}
                            style={{ width: 200 }}
                            placeholder="请选择状态"
                            defaultValue="-1"

                        >
                        <Option value="-1">等待审核</Option>
                        <Option value="1">通过</Option>
                        <Option value="0" >拒绝</Option>
                        </Select>
                        <Select
                            onChange={this.handleClassChange}
                            style={{ width: 200 }}
                            placeholder="请选择班级"
                        >
                            {
                                this.state.classes.map((item,index)=>{
                                return <Option key={index} value={item}>{item}</Option>
                                })
                            }
                        </Select>
                        <Button onClick={this.handleFind}>查询</Button>
                        <span><a href="#">==========</a></span>
                        {/* dee */}
                        <Button onClick={this.exportTable}><a href={`${baseUrl}exportResume.do?${Qs.stringify({
                            enrollId:this.props.match.params.id,
                            stage:this.state.stage,
                            status:this.state.statusExport||null,
                            willingClass:this.state.willingClassEx||null,
                        })}`}>导出表格</a></Button>
                        <Select
                            onChange={this.handleStatusChange1}
                            style={{ width: 150 }}
                            placeholder="可选择状态"
                        >
                            <Option value="-1">等待审核</Option>
                        <Option value="1">通过</Option>
                        <Option value="0" >拒绝</Option>
                        </Select>
                        <Select
                            onChange={this.handleClassChange1}
                            style={{ width: 150 }}
                            placeholder="可选择班级"
                        >
                            {
                                this.state.classes.map((item,index)=>{
                                return <Option key={index} value={item}>{item}</Option>
                                })
                            }
                        </Select>
                        <div className="lineBig">当前状态：
                        {
                            this.state.status==-1?'等待审核':this.state.status==1?'通过':'拒绝'
                        }
                        </div>
                        <Table columns={columnsJiKao} dataSource={this.state.list} style={{marginTop:'2%',width:'92%'} } 
                        pagination={false}/>
                        <br />
                        <br />
                        <br />
                        <div style={{overflow:"hidden"}}>
                        <span>总计：{this.state.total} 条数据</span>
                        <Pagination current={this.state.current} pageSize={20}  total={this.state.total} onChange={this.onChange} style={{float:'right',marginRight:"10%"}}/>
                        </div>
                    </TabPane>
                    <TabPane tab="面试" key="3">
                    <Select
                            onChange={this.handleStatusChange}
                            style={{ width: 200 }}
                            placeholder="请选择状态"
                            defaultValue="-1"
                        >
                            <Option value="-1">等待审核</Option>
                        <Option value="1">通过</Option>
                        <Option value="0" >拒绝</Option>
                        </Select>
                        <Select
                            onChange={this.handleClassChange}
                            style={{ width: 200 }}
                            placeholder="请选择班级"
                        >
                            {
                                this.state.classes.map((item,index)=>{
                                return <Option key={index} value={item}>{item}</Option>
                                })
                            }
                        </Select>
                        <Button onClick={this.handleFind}>查询</Button>
                        <span><a href="#">==========</a></span>
                        {/* dee */}
                        <Button onClick={this.exportTable}><a href={`${baseUrl}exportResume.do?${Qs.stringify({
                            enrollId:this.props.match.params.id,
                            stage:this.state.stage,
                            status:this.state.statusExport||null,
                            willingClass:this.state.willingClassEx||null,
                        })}`}>导出表格</a></Button>
                        <Select
                            onChange={this.handleStatusChange1}
                            style={{ width: 150 }}
                            placeholder="可选择状态"
                        >
                            <Option value="-1">等待审核</Option>
                        <Option value="1">通过</Option>
                        <Option value="0" >拒绝</Option>
                        </Select>
                        <Select
                            onChange={this.handleClassChange1}
                            style={{ width: 150 }}
                            placeholder="可选择班级"
                        >
                            {
                                this.state.classes.map((item,index)=>{
                                return <Option key={index} value={item}>{item}</Option>
                                })
                            }
                        </Select>
                        <div className="lineBig">当前状态：
                        {
                            this.state.status==-1?'等待审核':this.state.status==1?'通过':'拒绝'
                        }
                        </div>
                        <Table columns={columnsJiKao} dataSource={this.state.list} style={{marginTop:'2%',width:'92%'} } 
                        pagination={false}/>
                        <br />
                        <br />
                        <br />
                        <div style={{overflow:"hidden"}}>
                        <span>总计：{this.state.total} 条数据</span>
                        <Pagination current={this.state.current} pageSize={20}  total={this.state.total} onChange={this.onChange} style={{float:'right',marginRight:"10%"}}/>
                        </div>
                    </TabPane>
                </Tabs>
                <div>
                    {
                        this.state.stage==1?"":<div className="upload">
                        <div>
                        {
                      this.state.file.map((item,index)=>{
                          return <div key={index} className="audit-fileList">
                              <a>{item.name}</a><span onClick={()=>this.deleteFile(item.id)}><a><Icon type="delete" /></a></span>
                              <span><a href={`${baseUrl}file/downloadScore.do?id=`+item.id} target="_blank"><Icon type="download" /></a></span>
                              </div>
                      })
                  }
                        </div>
                            <div>请上传本阶段成绩文件(文件大小不超过3MB)：</div>
                            <a href={`${modoUrl}ScoreUploadTemplate.xlsx`}> 文件模板ScoreUploadTemplate.xlsx<Icon type="download" /></a>
                            
                            
                            <br></br>
                            <Upload {...props}>
              <Button>
                <Icon type="upload" />选择文件
              </Button>
            </Upload>
            <Button
              type="primary"
              onClick={this.handleUpload}
              disabled={fileList.length === 0}
              loading={uploading}
              style={{ marginTop: 16 }}
            >
              {uploading ? '上传中' : '开始上传'}
            </Button>
                        </div>
                    }
                
                </div>
                <Modal
          title="填写审核意见"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
             <TextArea placeholder="请填写审核意见" allowClear onChange={this.onInputChange} autoSize={{ minRows: 6, maxRows: 5 }} />
             <br />
             <div style={{marginTop:'20px'}}>
             是否通过：
            <Radio.Group onChange={this.handleUserStatusChange} value={this.state.userStatus}>
                <Radio value={1}>通过</Radio>
                <Radio value={0}>拒绝</Radio>
            </Radio.Group>
             </div>
             

         
        </Modal>
        <Drawer
          title="Basic Drawer"
          placement="right"
          closable={false}
          onClose={this.onClose1}
          visible={this.state.visible1}
        >
          <a href={this.state.url} target="_blank" style={{color:'#000'}}>报名文件点击此处查看</a>
        </Drawer>
        <Drawer
          title="Basic Drawer"
          placement="right"
          closable={false}
          onClose={this.onClose2}
          visible={this.state.visible2}
        >
          {
              this.state.urlArr.length==0?"该同学没有上传附件":
              this.state.urlArr.map((item,index)=>{
              return <div key={index}><a href={item.url} target={"_blank"}>{item.name}击此处查看</a></div>
              })
          }
        </Drawer>
            </div>
        )
    }
}
export default Auditrecruit;